import logo from './logo.svg';
import './App.css';

// 引入Home 组件
import Home from './views/Home.jsx';

// 引入类组件
import Category from './views/Category';

// 引入类组件Car
import Car from './views/Car';
// 就是根组件, 相当于vue中的app.vue
// 函数组件
// 特点: 无状态 无生命周期, 有hooks ,
// 注意:函数组件必须要还有return, return 返回组件的模板结构, 模板中必须有一个根标签

// import Mine from './views/Mine';

// import SlotView from './views/SlotView';

// import Myclass from './views/propstypes/Myclass';
// import MyFun from './views/propstypes/myFun';
// import From1 from './views/form/From1';
// import Father from './views/life/Father';
// function App() {
//   // 实现函数的组件的有状态, 这个数据是响应式的, 你需要使用hooks,一般都是以use开头的钩子函数,
//   // 最后说hooks
//   let username = '许聪';
//   const usernameArr = [
//     {
//       id: 1,
//       name: '刘备'
//     },
//     {
//       id: 2,
//       name: '关羽'
//     },
//     {
//       id: 3,
//       name: '张飞'
//     }
//   ]

//   const handClickFn = () => {
//     console.log('username');
//     username = '董宇航'
//     console.log(username);
//   }

//   let flag = true
//   return (
//     <div className="App">
//       我是app 组件
//       {/* <Home username={username}></Home> */}
//       {/* <Category usernameArr={usernameArr}></Category> */}
//       {/* <Car></Car> */}
//       {/* <Mine></Mine> */}
//       {/* <SlotView tit='123'>{username}</SlotView> */}
//       {/* <SlotView tit='123'><div><p>我是slot</p></div><p>123</p></SlotView> */}
//       {/* <SlotView>{usernameArr}</SlotView> */}
//       {/* <Myclass myhandleFn={handClickFn}></Myclass> */}
//       {/* <MyFun></MyFun> */}
//       <button onClick={flag = !flag}>控制组件的显示隐藏</button>
//       <Father></Father>
//     </div>
//   );
// }

// export default App;

// import Father from './views/cacelAxios/Father'

// import Dad from './views/getstatefromprops/Dad';
// import Father1 from './views/shouldupdate/Father1';
// import Snapshot from './views/Snapshot/Snapshot';
import React, { Component } from 'react';
// import Father from './views/tongxin/fathertochild/Father';
// import Father from './views/tongxin/kuaiji/Father';
// import Father from './views/tongxin/boothertobrother/Father';
// import Test1 from './views/storeview/Test1';

// import Mycom from './views/Hoc/Mycom';
// import Test2 from './views/storeview/Test2';
// import Test3 from './views/storeview/Test3';

// import Father from './views/router-view/Father';
// import Father from './views/cacelAxios/Father';

// import Father1 from './views/router-view/Father1'
// import Mycom from './views/css-in-js/Mycom';
// import Test from './views/proxy-test/Test';
// import Father from './views/hooks/Father';
// import Class1 from './views/rtkview/Class1';
// import Fun1 from './views/rtkview/Fun1';
// import Class2 from './views/rtkview/Class2';
import Fun2 from './views/rtkview/Fun2';
class App extends Component {
  state = {
    flag: true,
    mytit: 'abc'
  }
  render() {
    return (
      <div className="App">
        我是app 组件
        {/* <Home username={username}></Home> */}
        {/* <Category usernameArr={usernameArr}></Category> */}
        {/* <Car></Car> */}
        {/* <Mine></Mine> */}
        {/* <SlotView tit='123'>{username}</SlotView> */}
        {/* <SlotView tit='123'><div><p>我是slot</p></div><p>123</p></SlotView> */}
        {/* <SlotView>{usernameArr}</SlotView> */}
        {/* <Myclass myhandleFn={handClickFn}></Myclass> */}
        {/* <MyFun></MyFun> */}
        {/* <button onClick={this.changeFlag}>控制组件的显示隐藏</button>
        {
          this.state.flag ? <Father></Father> : <></>
        } */}
        {/* <Father></Father> */}
        {/* <Dad></Dad> */}
        {/* <Father1></Father1> */}
        {/* <Snapshot></Snapshot> */}
        {/* <From1></From1> */}
        {/* <Father></Father> */}
        {/* <Mycom></Mycom> */}
        {/* <Test2></Test2> */}
        {/* <Test3></Test3> */}
        {/* <Father></Father> */}
        {/* <Father></Father> */}
        {/* <From1></From1> */}
        {/* <Dad></Dad> */}
        {/* <Mycom></Mycom> */}
        {/* <Myclass myhandleFn={this.myhandleFn}></Myclass> */}
        {/* <Father1></Father1> */}
        {/* <Mycom></Mycom> */}
        {/* <Father></Father> */}
        {/* <Class1></Class1> */}
        {/* <Fun1></Fun1> */}
        {/* <Class2></Class2> */}
        <Fun2></Fun2>
      </div>
    );
  }

  myhandleFn = () => {
    this.setState({
      mytit: 'ABC'
    })
  }

  changeFlag = () => {
    this.setState({
      flag: !this.state.flag
    })
  }
}

export default App;

